<!DOCTYPE html>
<html lang="en" class="app">

<head>
    {include file="public:head_file"/}

</head>

<body class="">
<section class="vbox">
    {include file="public:header"/}
    <section>
        <section class="hbox stretch">
            {include file="public:slidemenu"/}
            <section id="content">
                <section class="vbox">
                    <section id="container">
                        <section class="hbox stretch bg-black dker">
                            <!-- side content -->
                            <aside class="col-sm-5 no-padder" id="sidebar">
                                <section class="vbox animated fadeInUp">
                                    <section class="scrollable">
                                        <div class="m-t-n-xxs item pos-rlt">
                                            <div class="top text-right">
                        <span class="musicbar animate bg-success bg-empty inline m-r-lg m-t" style="width:25px;height:30px">
                          <span class="bar1 a3 lter"></span>
                          <span class="bar2 a5 lt"></span>
                          <span class="bar3 a1 bg"></span>
                          <span class="bar4 a4 dk"></span>
                          <span class="bar5 a2 dker"></span>
                        </span>
                                            </div>
                                            <div class="bottom gd bg-info wrapper-lg">
                                                <span class="pull-right text-sm">101,400 <br>Followers</span>
                                                <span class="h2 font-thin">Soph Ashe</span>
                                            </div>
                                            <img class="img-full" src="__STATIC__/index/images/m43.jpg" alt="...">
                                        </div>
                                        <ul class="list-group list-group-lg no-radius no-border no-bg m-t-n-xxs m-b-none auto">
                                            <li class="list-group-item">
                                                <div class="pull-right m-l">
                                                    <a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
                                                    <a href="#" class="m-r-sm"><i class="icon-plus"></i></a>
                                                    <a href="#"><i class="icon-close"></i></a>
                                                </div>
                                                <a href="#" class="jp-play-me m-r-sm pull-left">
                                                    <i class="icon-control-play text"></i>
                                                    <i class="icon-control-pause text-active"></i>
                                                </a>
                                                <div class="clear text-ellipsis">
                                                    <span>E.T.M</span>
                                                    <span class="text-muted"> -- 04:35</span>
                                                </div>
                                            </li>
                                            <li class="list-group-item">
                                                <div class="pull-right m-l">
                                                    <a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
                                                    <a href="#"><i class="icon-plus"></i></a>
                                                </div>
                                                <a href="#" class="jp-play-me m-r-sm pull-left">
                                                    <i class="icon-control-play text"></i>
                                                    <i class="icon-control-pause text-active"></i>
                                                </a>
                                                <div class="clear text-ellipsis">
                                                    <span>Vestibulum id ligula porta</span>
                                                    <span class="text-muted"> -- 04:15</span>
                                                </div>
                                            </li>
                                            <li class="list-group-item">
                                                <div class="pull-right m-l">
                                                    <a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
                                                    <a href="#"><i class="icon-plus"></i></a>
                                                </div>
                                                <a href="#" class="jp-play-me m-r-sm pull-left">
                                                    <i class="icon-control-play text"></i>
                                                    <i class="icon-control-pause text-active"></i>
                                                </a>
                                                <div class="clear text-ellipsis">
                                                    <span>Praesent commodo cursus magna</span>
                                                    <span class="text-muted"> -- 02:25</span>
                                                </div>
                                            </li>
                                            <li class="list-group-item">
                                                <div class="pull-right m-l">
                                                    <a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
                                                    <a href="#"><i class="icon-plus"></i></a>
                                                </div>
                                                <a href="#" class="jp-play-me m-r-sm pull-left">
                                                    <i class="icon-control-play text"></i>
                                                    <i class="icon-control-pause text-active"></i>
                                                </a>
                                                <div class="clear text-ellipsis">
                                                    <span>Curabitur blandit tempus</span>
                                                    <span class="text-muted"> -- 05:00</span>
                                                </div>
                                            </li>
                                            <li class="list-group-item">
                                                <div class="pull-right m-l">
                                                    <a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
                                                    <a href="#"><i class="icon-plus"></i></a>
                                                </div>
                                                <a href="#" class="jp-play-me m-r-sm pull-left">
                                                    <i class="icon-control-play text"></i>
                                                    <i class="icon-control-pause text-active"></i>
                                                </a>
                                                <div class="clear text-ellipsis">
                                                    <span>Faucibus dolor auctor</span>
                                                    <span class="text-muted"> -- 03:50</span>
                                                </div>
                                            </li>
                                            <li class="list-group-item">
                                                <div class="pull-right m-l">
                                                    <a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
                                                    <a href="#"><i class="icon-plus"></i></a>
                                                </div>
                                                <a href="#" class="jp-play-me m-r-sm pull-left">
                                                    <i class="icon-control-play text"></i>
                                                    <i class="icon-control-pause text-active"></i>
                                                </a>
                                                <div class="clear text-ellipsis">
                                                    <span>Get lacinia odio sem nec elit cibus dolor auctor sed odio dui mollis ornare</span>
                                                    <span class="text-muted"> -- 04:05</span>
                                                </div>
                                            </li>
                                            <li class="list-group-item">
                                                <div class="pull-right m-l">
                                                    <a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
                                                    <a href="#"><i class="icon-plus"></i></a>
                                                </div>
                                                <a href="#" class="jp-play-me m-r-sm pull-left">
                                                    <i class="icon-control-play text"></i>
                                                    <i class="icon-control-pause text-active"></i>
                                                </a>
                                                <div class="clear text-ellipsis">
                                                    <span>Faucibus dolor auctor</span>
                                                    <span class="text-muted"> -- 02:55</span>
                                                </div>
                                            </li>
                                            <li class="list-group-item">
                                                <div class="pull-right m-l">
                                                    <a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
                                                    <a href="#"><i class="icon-plus"></i></a>
                                                </div>
                                                <a href="#" class="jp-play-me m-r-sm pull-left">
                                                    <i class="icon-control-play text"></i>
                                                    <i class="icon-control-pause text-active"></i>
                                                </a>
                                                <div class="clear text-ellipsis">
                                                    <span>Donec sed odio dui</span>
                                                    <span class="text-muted"> -- 04:35</span>
                                                </div>
                                            </li>
                                            <li class="list-group-item">
                                                <div class="pull-right m-l">
                                                    <a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
                                                    <a href="#"><i class="icon-plus"></i></a>
                                                </div>
                                                <a href="#" class="jp-play-me m-r-sm pull-left">
                                                    <i class="icon-control-play text"></i>
                                                    <i class="icon-control-pause text-active"></i>
                                                </a>
                                                <div class="clear text-ellipsis">
                                                    <span>Urna mollis ornare vel eu leo</span>
                                                    <span class="text-muted"> -- 05:10</span>
                                                </div>
                                            </li>
                                            <li class="list-group-item">
                                                <div class="pull-right m-l">
                                                    <a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
                                                    <a href="#"><i class="icon-plus"></i></a>
                                                </div>
                                                <a href="#" class="jp-play-me m-r-sm pull-left">
                                                    <i class="icon-control-play text"></i>
                                                    <i class="icon-control-pause text-active"></i>
                                                </a>
                                                <div class="clear text-ellipsis">
                                                    <span>Vivamus sagittis lacus vel augue</span>
                                                    <span class="text-muted"> -- 02:35</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </section>
                                </section>
                            </aside>
                            <!-- / side content -->
                            <section class="col-sm-4 no-padder bg">
                                <section class="vbox">
                                    <section class="scrollable hover">
                                        <ul class="list-group list-group-lg no-bg auto m-b-none m-t-n-xxs">
                                            <li class="list-group-item clearfix">
                                                <a href="#" onclick="addPlayList()" class="jp-play-me pull-right m-t-sm m-l text-md">
                                                    <i class="icon-control-play text"></i>
                                                    <i class="icon-control-pause text-active"></i>
                                                </a>
                                                <a href="#" class="pull-left thumb-sm m-r">
                                                    <img src="__STATIC__/index/images/m0.jpg" alt="...">
                                                </a>
                                                <a class="clear" href="#">
                                                    <span class="block text-ellipsis">Little Town</span>
                                                    <small class="text-muted">by Soph Ashe</small>
                                                </a>
                                            </li>
                                        </ul>
                                    </section>
                                </section>
                            </section>
                        </section>
                    </section>
                    {include file="public:player"/}
                </section>
            </section>
        </section>
    </section>
</section>
{include file="public:footer"/}
</body>

</html>